<template>
    <div>住户信息展示</div>
    <!-- 表格绑定分页器当前页面中的数据内容 --截取当前这个页的数据 -->
    <el-table :data="filterTableData.slice((currentPage4-1)*pageSize4,currentPage4*pageSize4)" height="250" style="width: 100%">
      <el-table-column prop="date" label="Date"  />
      <el-table-column prop="name" label="Name"  />
      <el-table-column prop="address" label="Address" />

      <!-- 搜索输入框 -->
      <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
     </el-table-column>
    </el-table>
    
    <!-- 分页器 -->
    <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterTableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        />
  </template>
  
  <script lang="ts" setup>
    import {ref, computed} from 'vue'
    import {useStore} from 'vuex'
    const store=useStore()
    const currentPage4 = ref(1)//当前页数
    const pageSize4 = ref(100)//每页显示条数
    const search=ref('')//搜索内容
    // 计算属性过滤数据--搜素框有内容时只显示包含搜索的内容
    const filterTableData=computed(()=>
    // 数据从vuex中读取
        store.state.homeview.tableData.filter((data)=>
            // 有搜素值时进行后面计算；没有搜素值时不进行后面计算，保持之前的数据
            !search.value||data.name.toLocaleLowerCase().includes(search.value.toLocaleLowerCase())
            ////////////////////
        )
    )
    const handleSizeChange = (val: number) => {//一页显示多少条内容
        pageSize4.value=val
    }
    const handleCurrentChange = (val: number) => {//修改当前页面
        currentPage4.value=val
    }
 
  </script>
  